<template>
    <div class="profit">
        <navBar :titleName="titleName"></navBar>
        <nut-buttongroup shape="circle">
            <nut-button type="light" @click="getData(-1,0)" class="profitBtn">
                今天
            </nut-button>
            <nut-button @click="getData(-7,1)" class="profitBtn">
                最近一周
            </nut-button>
            <nut-button @click="getData(-30,2)" class="profitBtn">
                最近一个月
            </nut-button>
        </nut-buttongroup>

        <nut-row style="margin-top: 20px;">
            <nut-col :span="12">
                <div class="flex-content" style="background-color: #29DDC4">
                    <div class="flex-body">
                        <p>约诊人数</p>
                        <p>{{advices}}</p>
                    </div>
                </div>
            </nut-col>
            <nut-col :span="12">
                <div class="flex-content" style="background-color: #1457F0">
                    <div class="flex-body">
                        <p>接诊人数</p>
                        <p>{{visits}}</p>
                    </div>
                </div>
            </nut-col>
        </nut-row>

        <nut-row style="margin-top: 10px;">
            <nut-col :span="12">
                <div class="flex-content" style="background-color: #5A8EF3">
                    <div class="flex-body">
                        <p>订单总数</p>
                        <p>{{order}}</p>
                    </div>
                </div>
            </nut-col>
            <nut-col :span="12">
                <div class="flex-content" style="background-color: #FFC406">
                    <div class="flex-body">
                        <p>待支付订单</p>
                        <p>{{preOrder}}</p>
                    </div>
                </div>
            </nut-col>
        </nut-row>

        <div class="flex-content" style="height: 100%">
            <nut-row style="margin-top: 10px;">
                <nut-col :span="24">
                    <p style="margin-left: 15px;font-size: 1.3em;">总金额（元）</p>
                    <p style="margin-left: 15px;text-align: left;font-size: 1.3em;font-weight: 600">
                        {{price | formatPrice}}
                    </p>
                </nut-col>
            </nut-row>
            <nut-row>
                <nut-col :span="12" style="border: solid 1px #eee;">
                    <p style="margin-left: 15px;font-size: 1em;">药品金额</p>
                    <p style="margin-left: 15px;text-align: left;font-size: 1em;font-weight: 600">
                        {{drugFee | formatPrice}}
                    </p>
                </nut-col>
                <nut-col :span="12" style="border: solid 1px #eee;">
                    <p style="margin-left: 15px;font-size: 1em;">诊金金额</p>
                    <p style="margin-left: 15px;text-align: left;font-size: 1em;font-weight: 600">
                        {{diagnosisFee | formatPrice}}
                    </p>
                </nut-col>
                <nut-col :span="24">
                    <p style="margin-left: 15px;font-size: 1em;">运费金额</p>
                    <p style="margin-left: 15px;text-align: left;font-size: 1em;font-weight: 600">
                        {{freight | formatPrice}}
                    </p>
                </nut-col>
            </nut-row>
        </div>

    </div>
</template>

<script>
    /* eslint-disable no-console */
    import navBar from '@/components/common/navBar.vue'

    export default {
        name: "profit",
        components: {
            navBar
        },
        data() {
            return {
                titleName: "医生收益",
                startDate: "",
                endDate: "",

                advices: 0,
                visits: 0,

                price: 0,
                freight: 0,
                diagnosisFee: 0,
                drugFee: 0,
                order: 0,
                preOrder: 0
            }
        },
        created() {
            this.getData(-1);
        },
        filters: {
            formatPrice: function (price) {
                return new Number((price || 0) / 100).toFixed(2);
            }
        },
        methods: {

            getData(day, num) {

                if (num > -1) {
                    let btns = document.getElementsByClassName("profitBtn");
                    for (let i = 0; i < btns.length; i++) {
                        btns[i].style.backgroundColor = "#fff";
                        btns[i].style.color = "#919191";
                    }
                    btns[num].style.color = "#fff";
                    btns[num].style.backgroundColor = "#5A8EF3";
                }

                let today = new Date();
                this.endDate = today.Format("yyyy-MM-dd");
                let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                this.startDate = today.Format("yyyy-MM-dd");
                this.getProfit();
            },
            getProfit: function () {
                this.API.POST(this.ApiUrl.POST_PROFIT, {
                    "did": this.$store.state.doctor.doctorId,
                    "endDate": this.endDate,
                    "startDate": this.startDate
                }).then(({data}) => {
                    console.log("医生收益------", data);
                    if (data.code === 1200) {
                        console.log(data.data);
                        this.order = 0;
                        this.preOrder = 0;

                        this.price = 0;
                        this.freight = 0;
                        this.diagnosisFee = 0;
                        this.drugFee = 0;

                        let profits = data.data.profits;
                        for (let i = 0; i < profits.length; i++) {
                            let item = profits[i];
                            console.log(item);
                            this.order += item.num;

                            this.price += item.price;
                            this.freight += item.freight;
                            this.diagnosisFee += item.diagnosisFee;
                            this.drugFee += item.drugFee;

                            if (item.status === "待支付") {
                                this.preOrder = item.num;
                            }
                        }
                        let advices = data.data.advices;
                        this.advices = 0;
                        this.visits = 0;
                        for (let i = 0; i < advices.length; i++) {
                            let item = advices[i];
                            console.log(item);
                            if (item.status === "接诊") {
                                this.visits = item.num;
                            }
                            this.advices += item.num;
                        }
                    }
                }).catch(err => {
                    console.log("getProfit::err------", err);
                });
            }
        }
    }
</script>

<style scoped>
    .profit {
        min-height: 640px;
        /*background-color: #f6f6f6;*/
        padding-top: 50px;
    }

    .nut-button {
        padding: 0;
        color: #919191;
        background: #FFFFFF;
        box-shadow: 5px 0 5px 0 #cacaca;
    }

    .light {
        color: #FFFFFF;
        background: #5A8EF3;
        box-shadow: 5px 0 5px 0 #cacaca;
    }

    .flex-content {
        padding: 1px;
        margin: 15px;
        border-radius: 10px;
        height: 98px;
        box-shadow: 5px 5px 5px 5px #cacaca;
    }

    .flex-content .flex-body {
        background-color: white;
        margin-left: 20px;
        margin-top: -18px;
        min-height: 98px;
        padding-bottom: 3px;
        border-radius: 0 10px 10px 0;
        box-shadow: 2px 2px 2px 2px #cacaca;
    }

    p {
        text-align: left;
        font-size: 1.2em;
        margin: 16px 5px;
    }
</style>